// out:../css/
@import './base';
@vw:3.75vw;
//头部
header{
 width: (375/@vw);
 height: (50/@vw);
 //fixed布局脱离标准流,不占布局的位置
 position: fixed;
 left:0;
 top:0;
 display: flex;
 justify-content: space-between;
 padding: 0 (15/@vw) 0 (15/@vw);
 //左边部分
 .left{
  width: (235/@vw);
  height: (50/@vw);
  background-image: url(../assets/head.png);
  background-size: contain;
  background-repeat: no-repeat;
 }
 //右边部分
 .right{
  width: (80/@vw);
  height: (30/@vw);
  border-radius: (15/@vw);
  text-align: center;
  line-height: (30/@vw);
  background-color: #FFE31B;
  align-self: center;
 }
}

//搜索的整体部分
.second{
 width:(375/@vw);
 height: (52/@vw);
 padding: (10/@vw)(15/@vw);
 margin-top: (50/@vw);
 
 //搜索
 .search{
  width: (345/@vw);
  height: (32/@vw);
  border-radius: (16/@vw);
  background-color: #F2F4F5;
  text-align: center;
  line-height: (32/@vw);
  color: #A1A4B3;
  font-size: (14/@vw);
   .iconfont{
     font-size: (16/@vw);
   }
 }
}
//轮播图
.banner{
  width:(375/@vw);
  height:(108/@vw);
  padding-left: (15/@vw);
  padding-right: (15/@vw);

  //图片
  .picture{
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius:(5/@vw);
  }
}
.List{
  width: 100%;
  padding: 0 (15/@vw);
  margin-top:(20/@vw);

  .content{
    display: block;
    unicode-bidi: isolate;

    ul li{
     display: flex;
     margin-bottom:(16/@vw);
     height:(105/@vw);
     background-color: #fff;
     border-radius:(16/@vw);
     .pic{
      margin-right: (20/@vw);
      img {
        width: (105/@vw);
        height: (105/@vw);
        border-radius: (16/@vw);
      }
     }
     .txt{
      width:(214.22/@vw);
      height:(28.8/@vw);
        a {
          display: block;
          font-size: (12/@vw);
          color: #A1A4B3;
          line-height:1.8;
        }
       .some{
         font-size:(14/@vw);
         color:#333;
        .iconfont {
           font-size: (16/@vw);
        }
       }
     }
    };
  }
}
//排行榜
.third {
    //酷我排行榜部分
    .title {
        height: (26.5/@vw);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-self: center;
        margin-bottom: (16/@vw);
        //酷我排行榜
        h4 {
            font-size: (20/@vw);
            line-height: (26.5/@vw);
            text-align: center;
        }

        //右侧部分
        .more {
            width: (40/@vw);
            height: (26.5/@vw);
            display: flex;

            //右侧文字
            .text {
                color: #A1A4B3;
                font-size: (12/@vw);
                line-height: (26.5/@vw);
            }

            //右侧图标
            .iconfont {
                font-size: (16/@vw);
                line-height: (26.5/@vw);
                color: #A1A4B3;
            }
        }
    }
}
//推荐歌单
.like{
 margin-top:(20/@vw);
//  height:(600/@vw);
 width: 100%;
 padding:0 (15/@vw);

//文字
 .like_title{
   height:(26.5/@vw);
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-self: center;
   margin-bottom:(16/@vw);
   //推荐歌单
   h4{
    font-size:(20/@vw);
    line-height:(26.5/@vw);
    text-align: center;
    align-self: center;
   }

   //右侧部分
   .title_more{
     width:(40/@vw);
     height:(26.5/@vw);
     display: flex;

     //右侧文字
     .more_text{
        color:#A1A4B3;
        font-size:(12/@vw);
        line-height:(26.5/@vw);
     }

     //右侧图标
     .iconfont{
      font-size:(16/@vw);
      line-height:(26.5/@vw);
      color: #A1A4B3;
     }
   }
 }

 //内容
 .like_content{
  height:(318/@vw);
  //上面部分
  .content_top{
    height:(159/@vw);
    justify-content: space-around;
    display: flex;
    //上左
    .top_one{
      width:(105/@vw);
      height:(142/@vw);
      margin-right:(15/@vw);
      .pc1{
        width:(105/@vw);
        height:(105/@vw);
        position: relative;
        img {
          width: (105/@vw);
          height: (105/@vw);
          object-fit: cover;
          border-radius: (10/@vw);
        }
        .pc1_text{
          position:absolute;
          width:(70/@vw);
          height:(28/@vw);
          left: 0;
          bottom: 0;
          background-color: rgba(0, 0,0, 0.8);
          border-radius: 0 (10/@vw) 0 (10/@vw);
          text-align: center;
          line-height:(28/@vw);
          color: #fff;
          font-size:(14/@vw);
        }
      }
      .one_text{
        font-size:(14/@vw);
      }
    }
    //上中
    .top_second {
      width: (105/@vw);
      height: (142/@vw);
      margin-right: (15/@vw);
      .pc2{
           width: (105/@vw);
           height: (105/@vw);
           position: relative;

        img {
            width: (105/@vw);
            height: (105/@vw);
            object-fit: cover;
            border-radius: (10/@vw);
            position: relative;
        }
        .pc2_text{
                position: absolute;
                width: (70/@vw);
                height: (28/@vw);
                left: 0;
                bottom: 0;
                background-color: rgba(0, 0, 0, 0.8);
                border-radius: 0 (10/@vw) 0 (10/@vw);
                text-align: center;
                line-height: (28/@vw);
                color: #fff;
                font-size: (14/@vw);
        }
      }
    .second_text {
        font-size: (14/@vw);
    }
   }
   //上右
   .top_third{
      width: (105/@vw);
      height: (142/@vw);
      .pc3{
            width: (105/@vw);
            height: (105/@vw);
            position: relative;
         img {
              width: (105/@vw);
              height: (105/@vw);
                object-fit: cover;
                border-radius: (10/@vw);
                position: relative;
          }
        .pc3_text{
            position: absolute;
            width: (70/@vw);
            height: (28/@vw);
            left: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 0 (10/@vw) 0 (10/@vw);
            text-align: center;
            line-height: (28/@vw);
            color: #fff;
            font-size: (14/@vw);
    }
      }
      
    .third_text {
        font-size: (14/@vw);
    }
   }
  }
  //下面部分
   .content_bottom {
            height: (159/@vw);
            justify-content: space-around;
            display: flex;
    
            //上左
            .bottom_one {
                width: (105/@vw);
                height: (142/@vw);
                margin-right: (15/@vw);
    
                .pc4 {
                    width: (105/@vw);
                    height: (105/@vw);
                    position: relative;
    
                    img {
                        width: (105/@vw);
                        height: (105/@vw);
                        object-fit: cover;
                        border-radius: (10/@vw);
                    }
    
                    .pc4_text {
                        position: absolute;
                        width: (70/@vw);
                        height: (28/@vw);
                        left: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.8);
                        border-radius: 0 (10/@vw) 0 (10/@vw);
                        text-align: center;
                        line-height: (28/@vw);
                        color: #fff;
                        font-size: (14/@vw);
                    }
                }
    
                .one_text {
                    font-size: (14/@vw);
                }
            }
    
            //上中
            .bottom_second {
                width: (105/@vw);
                height: (142/@vw);
                margin-right: (15/@vw);
    
                .pc5 {
                    width: (105/@vw);
                    height: (105/@vw);
                    position: relative;
    
                    img {
                        width: (105/@vw);
                        height: (105/@vw);
                        object-fit: cover;
                        border-radius: (10/@vw);
                        position: relative;
                    }
    
                    .pc5_text {
                        position: absolute;
                        width: (70/@vw);
                        height: (28/@vw);
                        left: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.8);
                        border-radius: 0 (10/@vw) 0 (10/@vw);
                        text-align: center;
                        line-height: (28/@vw);
                        color: #fff;
                        font-size: (14/@vw);
                    }
                }
    
                .second_text {
                    font-size: (14/@vw);
                }
            }
    
            //上右
            .bottom_third {
                width: (105/@vw);
                height: (142/@vw);
    
                .pc6 {
                    width: (105/@vw);
                    height: (105/@vw);
                    position: relative;
    
                    img {
                        width: (105/@vw);
                        height: (105/@vw);
                        object-fit: cover;
                        border-radius: (10/@vw);
                        position: relative;
                    }
    
                    .pc6_text {
                        position: absolute;
                        width: (70/@vw);
                        height: (28/@vw);
                        left: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.8);
                        border-radius: 0 (10/@vw) 0 (10/@vw);
                        text-align: center;
                        line-height: (28/@vw);
                        color: #fff;
                        font-size: (14/@vw);
                    }
                }
    
                .third_text {
                    font-size: (14/@vw);
                }
            }
  }
 }
}
//下载
.download{
 position: fixed;
 left:(15/@vw);
 bottom:(30/@vw);
 display: flex;
 align-items: center;
 padding: 0 (10/@vw) 0 (15/@vw);
 width:(345/@vw);
 height:(45/@vw);
 background-color:#fff;
 border-radius:(22/@vw);

 img{
   width:(36/@vw);
   height:(36/@vw);
   margin-right:(10/@vw);
 }
 p{
  flex: 1;
  font-size:(14/@vw);
 }
 span{
  width:(32/@vw);
  height:(32/@vw);
  background-color: #F2F3F5;
  border-radius:50%;
  text-align: center;
  line-height:(32/@vw);
  font-size:(16/@vw);
 }
}
